import React from 'react';

class Cat extends React.Component {
    render() {
        const mouse = this.props.mouse;
        return (
            <img src="/favicon.ico" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
        );
    }
}

class Mouse extends React.Component {
    constructor(props) {
        super(props);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.state = { x: 0, y: 0 };
    }

    handleMouseMove(event) {
        this.setState({
            x: event.clientX,
            y: event.clientY
        });
        console.log(this.state)
    }

    render() {
        return (
            <div style={{ height: '10000px', width: '10000px', backgroundColor: '#3498DB'}} onMouseMove={this.handleMouseMove}>
                {/*{this.props.helloRender(this.state)}*/}
                {this.props.children(this.state)}
            </div>
        );
    }
}

export default class MouseTracker extends React.Component {
    render() {
        return (
            <div>
                <h1>Move the mouse around!</h1>
                {/*<Mouse helloRender={mouse => <Cat mouse={mouse} /> }/>*/}
                <Mouse>
                    {mouse => (
                        <p>The mouse position is {mouse.x}, {mouse.y}</p>
                    )}
                </Mouse>
            </div>
        );
    }
}